<template>
  <div class="home">
    <div class="white" :style="{ paddingTop: paddingTop + 'px' }">
      <div class="wrap clearfix">
        <div class="logo">
          <!-- <img src="../../assets/images/login/logo.png" /> -->
          <img :src="loginPng" alt="" />
        </div>
        <div class="pull-left login-block">
          <div class="login-div">
            <div class="login-title">
              <img src="../../assets/images/login/qiye_title.png" />
            </div>
            <!-- :rules="loginFormRules" -->
            <el-form
              :model="loginForm"
              ref="loginFormRef"
              class="login-form"
              @submit.native.prevent
            >
              <el-form-item label="" prop="userName">
                <el-input
                  v-model="loginForm.userName"
                  placeholder="手机号 / 账号"
                  size="medium"
                >
                  <template slot="prepend"
                    ><i class="el-icon-user-solid"></i
                  ></template>
                </el-input>
              </el-form-item>
              <el-form-item label="" prop="password">
                <el-input
                  v-model="loginForm.password"
                  type="password"
                  placeholder="登录密码"
                  size="medium"
                >
                  <template slot="prepend"
                    ><i class="el-icon-lock"></i
                  ></template>
                </el-input>
              </el-form-item>
              <el-form-item class="form-bd">
                <div class="forget" type="primary" @click="goToPassword" v-if="!isPrivateLocal">
                  忘记密码?
                </div>
                <el-button
                  type="primary"
                  size="medium"
                  @click="submitLoginInfo('loginFormRef')"
                  native-type="submit"
                  >登录</el-button
                >
              </el-form-item>
            </el-form>
            <div style="color: red">{{ text }}</div>
          </div>
        </div>
        <div class="pull-right login-info">
          <div>
            1.请注册用户牢记个人登录密码，如密码外泄请立即更换新密码；
            <br />2.请尽量不要使用公共电脑登陆，如使用请不要选择记录登陆信息；
            <br />
            3.{{
              product_name
            }}后台管理系统会记录登陆所使用的IP地址、用户名及所有后台操作记录，请勿使用非本人账户登陆；
            <br />4.企业档案本身具有机要性质，登陆人员必须遵守保密制度，确保档案的隐私及安全。如信息外泄，请立即上报给相关负责人。
          </div>
          <div class="contact-info">
            专属客服热线：180-1470-2925
            <br />IT服务热线：025-‭8660 0864
          </div>
          <div class="contact-time">
            窍楚客服7*24小时竭诚为您服务，承诺3分钟之内响应
          </div>
          <div class="qiye-logo">
            <img src="../../assets/images/login/qiye_logo.png" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入登录的接口定义
// import { LOGIN } from "@/apis/login.js";
import loginPng from "@/assets/images/login/logo.png";
import { userLogin, getDomainInfo, getLogoList, getAllChildList, getWifiPopup, updateWifiPopup } from "@/api/member/index";
import Cookies from "js-cookie";
export default {
  data() {
    return {
      isPrivateLocal: process.env.VUE_APP_LOCAL == "fangshan",
      loginPng: loginPng,
      domainInfo: {},
      codeArr: [],
      text: "",
      product_name: "",
      paddingTop: 0,
      loginForm: {
        userName: "",
        password: "",
      },
      loginFormRules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 16,
            message: "长度在 3 到 16 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 18,
            message: "长度在 6 到 18 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  components: {},
  created() {
    this.getHeight();
  },
  mounted() {
    let a = window.location.hostname;
    this.getDomainInfo(a);

    window.onresize = () => {
      this.getHeight();
    };

    if (this.isPrivateLocal) {
      this.getConfigLogo()
    }
  },

  methods: {
    getConfigLogo() {
      getLogoList().then(res => {
        if (res.code == 200) {
            let logolist = res.data;
            this.loginPng =
              "data:image/png;base64," +
              logolist.filter((m) => m.configName == "logo4")[0].configValue;
          }
      })
    },
    // 获得域名对应图片信息
    getDomainInfo(domain) {
      localStorage.setItem("domainInfo", JSON.stringify({}));
      getDomainInfo({ domain: domain }).then((res) => {
        this.domainInfo = res.data;
        if (res.data) {
          this.loginPng = res.data.loginLogo;
          // 将域名信息写到localStorage
          localStorage.setItem("domainInfo", JSON.stringify(res.data));
        } else {
          // 跳转到dangan.qcdoc.cn
          // window.open('https://dangan.qcdoc.cn', '_self')
        }
      });
    },
    // 获取屏幕高度
    getHeight() {
      if (window.innerHeight > 600) {
        this.paddingTop = (window.innerHeight - 600) / 2;
      }
    },
    // 忘记密码
    goToPassword() {
      this.$router.push({ name: "ForgotPassword" });
    },
    // 获得菜单codeArr
    getMenuCode(MenuTree) {
      MenuTree.map((e) => {
        this.codeArr.push(e.code);
        if (e.childList.length > 0) {
          this.getMenuCode(e.childList);
        }
      });
    },

    // 提交登录信息
    submitLoginInfo(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 为空时提示
          if (
            this.loginForm.userName === "" ||
            this.loginForm.password === ""
          ) {
            this.$message({
              type: "error",
              message: "请输入用户名及密码",
            });
            return;
          }

          const params = {
            username: this.loginForm.userName,
            password: this.loginForm.password,
          };
          new Promise((resolve) => {
            userLogin(params)
              .then((res) => {
                // 如果 角色是空的  提示 您好！您的账户暂时无法登录，请联系管理员！
                if (res.data.nodeList.length == 0 || res.data.roleList.length == 0) {
                  this.$message({
                    type: "error",
                    message: "您好！您的账户暂时无法登录，请联系管理员！",
                  });
                  this.$router.push({
                    path: "/login",
                  });
                  return
                }

                // 获得被允许的菜单Code
                this.codeArr = [];
                this.getMenuCode(res.data.nodeList);
                const userInfo = {
                  name: res.data.name,
                  userId: res.data.id,
                  token: res.data.token,
                  mobile: res.data.mobile,
                  email: res.data.email,
                  roleList: res.data.roleList,
                  realName: res.data.realName,
                };
                // 将用户名和 token 写入cookie 保存 / 考虑写入loaclStorage
                this.$store.commit(
                  "app/SET_USERINFO",
                  JSON.stringify(userInfo)
                );

                // 读取名下子部门
                getAllChildList().then((m) => {
                  res.data["childDepartmentList"] = m.data.filter(
                    (w) => w.id != res.data.departmentList[0].id
                  );

                  const localUserInfo = {
                    authIdArr: this.codeArr,
                    ...res.data,
                  };
                  // 将用户名等信息写入loaclStorage
                  this.$store.commit(
                    "app/SET_LOCAL_USERINFO",
                    JSON.stringify(localUserInfo)
                  );

                  this.$message({
                    type: "success",
                    message: "登录成功",
                  });

                  // 跳转到 登录时重定向的页面 ，  如无 则去首页
                  this.$router.push({
                    path: this.$route.query.redirect
                      ? this.$route.query.redirect
                      : "/",
                  });
                  // 判断
                  if (this.isPrivateLocal) {
                  getWifiPopup().then(res => {
                    if (res.data) {
                      this.$confirm("您的wifi密码已到期，请尽快修改密码！", "wifi密码修改提醒", {
                        confirmButtonText: "确定"
                      }).then((mmm) => {
                        console.log(mmm, 'jjjjjj ')
                        updateWifiPopup().then(resm => {
                          console.log(resm, '11111111111jjjjjj ')
                          this.$message({
                            type: "success",
                            message: "弹窗已关闭",
                          });
                        })
                    
                      }).catch((error) => {
                        console.log(error, 'wwwwww ')
                      })

                    }
                  })
                }
                  
                });
              })
              .catch((err) => {
                // this.loginForm={}
              });
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  color: #000;
}
.white {
  background: url("../../assets/images/login/white/bg_1.jpg") repeat;
  position: relative;
  min-height: 100%;
  height: 100vh;
  color: #000;
  .wrap {
    background-image: url("../../assets/images/login/white/bg.png");
    box-sizing: content-box;
    margin: 0 auto 0;
    padding: 94px 50px 54px;
    height: 480px;
    width: 819px;
    // background: url("../../assets/images/login/bg.png") no-repeat left;
    position: relative;
  }
}
a,
a:link,
a:visited,
a:hover,
a:active {
  color: #dd5510;
  text-decoration: none;
}

/* let's clear some floats */
.clearfix:before,
.clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  overflow: hidden;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  zoom: 1;
}
.pull-left {
  float: left;
}
.pull-right {
  float: right;
}

.btn-class {
  background-color: #dd5510;
  padding: 5px 30px;
  color: #fff;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.btn-class.disabled,
.btn-class[disabled] {
  color: #333333;
  background-color: #e6e6e6;
  *background-color: #d9d9d9;
  cursor: default;
}
.logo {
  height: 73px;
}
.logo img {
  height: 60px;
  max-height: 73px;
}
.login-div {
  margin-top: 80px;
  margin-left: 60px;
}
.login-title {
  margin-bottom: 30px;
}

// 登录框
.login-form {
  ::v-deep .el-input-group__prepend {
    padding: 0 12px;
  }

  .form-bd {
    ::v-deep .el-form-item__content {
      display: flex;
      justify-content: flex-end;
      line-height: 30px;
      .forget {
        cursor: pointer;
        color: #dd5510;
        margin-right: 60px;
        flex: 1;
      }
      .el-button {
        width: 90px;
        line-height: 30px;
        padding: 0;
        // height: 50px;
        // line-height: 50px;
      }
    }
  }
}

// .login-form .input-class {
//   height: 30px;
//   line-height: 30px;
//   padding-left: 35px;
//   width: 240px;
//   display: block;
//   margin-bottom: 20px;
//   border: 0;
//   border-radius: 4px;
//   color: #000;
//   font-family: "微软雅黑";
//   background-color: #fff;
// }
/* .login-form input#mobile {
  background: url("./images/icon-1.jpg") no-repeat left #fff;
}
.login-form input#password {
  background: url("./images/icon-2.jpg") no-repeat left #fff;
} */
.login-button {
  text-align: right;
  margin-top: -15px;
}
.login-info {
  width: 290px;
  padding: 100px 30px 0 0;
  margin-right: 30px;
  // color: #ffffff;
  font-size: 0.9em;
  line-height: 1.3em;
}
.contact-info {
  position: absolute;
  right: 110px;
  bottom: 165px;
  color: #dd5510;
  font-style: italic;
  font-weight: bold;
  text-align: right;
}
.contact-time {
  position: absolute;
  right: 110px;
  bottom: 135px;
  color: #dd5510;
  font-weight: bold;
  text-align: right;
}
.qiye-logo {
  position: absolute;
  right: 95px;
  bottom: 57px;
}

::v-deep  .el-form-item__content {
  width: 100%;
  line-height: 40px;
  .el-input {
    height: 40px;
    .el-input__inner {
      height: 40px;
      line-height: 40px;
    }
  }
}
</style>
